<template>
  <el-container>
    <el-breadcrumb separator>
      <!-- <el-breadcrumb-item>接口服务日志</el-breadcrumb-item> -->
    
      <el-form label-width="120px" class="form-fliter" @submit.native.prevent>
        <!--高级检索-->
        <div class="searchDiv height-search">
          <div class="dataSearch">
            <el-input
              type="text"
              v-model="searchName"
              placeholder="请输入请求方名称或终端标识"
              @keyup.enter.native="search" clearable>
               <i @click="search" style="color:#0090ff; font-size:14px" class="iconfont icon-sousuo" slot="suffix"></i>
            </el-input>
          </div>
          <span class="high-search"  v-on:click.stop="doCollapse">
            高级搜索
            <i
              :class="collapse ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"
            ></i>
          </span>
          <el-button style="width:88px;" @click="clearData" class="def-btn-sty">重置</el-button>
          <div class="checkDiv" v-if="collapse" id="myPanel">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
              <el-form-item label="调用时间：">
                <el-date-picker
                  style="width:100%"
                  v-model="ruleForm.datetimerange"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :editable="false"
                  time-arrow-control
                  :picker-options="pickerOptions0"
                ></el-date-picker>
              </el-form-item>
            </el-form>
            <div class="mr-btn mt-20">
              <el-button type="primary" @click="search('close')">确定</el-button>
            </div>
          </div>
        </div>
      </el-form>
    </el-breadcrumb>

    <!-- <el-breadcrumb class="input-num-reserach" v-if="searchName || (ruleForm.datetimerange != null && ruleForm.datetimerange.length != 0)">
      <div>
        <span v-if="searchName">{{ searchName}}<span class="x-handel" @click="deleteSelectHandel('1')">x</span></span>
        <span v-if=" ruleForm.datetimerange != null && ruleForm.datetimerange.length != 0">
          {{ ruleForm.datetimerange[0] }}-{{ ruleForm.datetimerange[1]
          }}<span class="x-handel" @click="deleteSelectHandel('2')">x</span>
        </span>
      </div>
    </el-breadcrumb> -->

    <el-main style="margin-top:-20px">
      <el-button style="margin-top:-40px" type="primary" class="golable-sty-btn" @click="importFile">导出</el-button>
      
      <el-table
        style="margin-top:45px;background-color:#fff"
        :data="logList"
        class="mt-20"
        stripe
        height="calc(100vh - 200px)"
        v-loading="loading">
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column
          prop="requestName"
          label="请求方名称"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="requestUri"
          label="接口标识"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="requestParam"
          label="请求参数"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="deviceId"
          label="终端标识"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="requestTime"
          label="调用时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="requestResult"
          label="调用结果"
          width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row.requestResult == 0">成功</span>
            <span v-else>失败</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <div class="clearfix enc-pagination" style="padding:10px">
        <el-pagination
          class="mr-btn"
          background
          @current-change="handleCurrentChange"
           @size-change="handleSizeChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="prev, pager, next, jumper,sizes,total"
          :total="total"></el-pagination>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import { getInterfaceLog, importLog } from "@/api/logApi.js";
export default {
  components: {},
  data() {
    return {
      loading: true,
      searchName: "",
      collapse: false,
      showDatePicker: false,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      logList: [],
      ruleForm: {
        datetimerange: []
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  },
  created() {
    this.getInterfaceLog();
    document.addEventListener("click", (e)=>{
      var sp = document.getElementById("myPanel");
      if(sp){
        if(!sp.contains(event.target)) {
          this.collapse= !this.collapse;
        }
      }
    })
  },
  watch: {
    $route(to, from) {
      if (to.name == "interfaceServiceLog") {
        this.getInterfaceLog();
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getInterfaceLog();
    },
    deleteSelectHandel(type, val) {
      if (type == "1") {
        this.searchName = "";
      }
      if (type == "2") {
        this.ruleForm.datetimerange = null;
      }
      this.getInterfaceLog();
    },
    //查询所有用户
    getInterfaceLog() {
      this.loading = true;
      let params = {
        appName: this.searchName,
        startTime:
          this.ruleForm.datetimerange == null
            ? ""
            : this.ruleForm.datetimerange[0],
        endTime:
          this.ruleForm.datetimerange == null
            ? ""
            : this.ruleForm.datetimerange[1],
        offset: this.currentPage,
        limit: this.pageSize,
        flag: false
      };
      getInterfaceLog(params)
        .then(res => {
          this.loading = false;
          if (res.data.success) {
            this.total = res.data.data.total;
            this.logList = res.data.data.list;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //打开高级检索
    doCollapse() {
      this.collapse = !this.collapse;
    },
    //高级检索查询
    search(type) {
      this.currentPage = 1;
      if (type === "close") {
        this.collapse = !this.collapse;
      }
      this.getInterfaceLog();
    },
    // 重置
    clearData() {
      this.searchName = "";
      this.ruleForm.typeList = [];
      this.ruleForm.datetimerange = []
      this.getInterfaceLog();
    },
    importFile() {
      let params = {
        appName: this.searchName,
        startTime:
          this.ruleForm.datetimerange == null
            ? ""
            : this.ruleForm.datetimerange[0],
        endTime:
          this.ruleForm.datetimerange == null
            ? ""
            : this.ruleForm.datetimerange[1],
        limit: this.pageSize,
        flag: true
      };
      importLog("3", params);
    },
    //分页选择
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getInterfaceLog();
    },
    datepickerToggle(key) {
      this.showDatePicker = key === "enter";
    },
    mouseleave(key) {
      this.collapse = key === "enter";
      if (key === "enter" && this.showDatePicker) {
        this.showDatePicker = false;
      }
    },
    msg(err, type) {
      this.$alert(err, "提示", {
        confirmButtonText: "确定",
        type: type,
        callback: action => {}
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.enc-pagination {
  float: right;
}

</style>
